<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">	
	<title>京东商城</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<link rel="stylesheet" type="text/css" href="swiper-3.4.2.min.css"/>
	</head>
	<body>
	       <div id="box">
	       	
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			       <div class="swiper-slide"><img src="img/3.jpg"/></div>
			       <div class="swiper-slide"><img src="img/1.jpg"/></div>
			       <div class="swiper-slide"><img src="img/2.jpg"/></div>
			       <div class="swiper-slide"><img src="img/4.jpg"/></div>
			       <div class="swiper-slide"><img src="img/5.jpg"/></div>
			       <div class="swiper-slide"><img src="img/6.jpg"/></div>
			       <div class="swiper-slide"><img src="img/7.jpg"/></div>
			       <div class="swiper-slide"><img src="img/8.jpg"/></div>
			    </div>
			    <!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
				
			</div>
			<header class="header clear">
				<span class="login">登录</span>
				<div class="box1">
					
					<span ><img src="img/jd.png" class="one"/></span>
					<span ><img src="img/ss.png" class="two"/></span>	
					<input type="text" value="DW京东超级品牌日，不止五折" />
				
				</div>
				
			</header>
			<div class="banner"><img src="img/nb.jpg"</div>
			<ul class="nav clear">
				<li>
					<img src="img/jdcs.png" alt="" />
					<p>京东超市</p>
				</li>
				<li>
					<img src="img/qqg.png" alt="" />
					<p>全球购</p>
				</li>
				<li>
					<img src="img/fzc.png" alt="" />
					<p>服装城</p>
				</li>
				<li>
					<img src="img/jdsx.png" alt="" />
					<p>京东生鲜</p>
				</li>
				<li>
					<img src="img/jddj.png" alt="" />
					<p>京东到家</p>
				</li>
				<li>
					<img src="img/czjf.png" alt="" />
					<p>充值缴费</p>
				</li>
				<li>
					<img src="img/ljd.png" alt="" />
					<p>领京豆</p>
				</li>
				<li>
					<img src="img/lq.png" alt="" />
					<p>领券</p>
				</li>
				<li>
					<img src="img/zq.png" alt="" />
					<p>赚钱</p>
				</li>
				<li>
					<img src="img/wlcx.png" alt="" />
					<p>物流查询</p>
				</li>
			</ul>
			<div class="xrzx"><img src="img/xrzx.jpg"></div>
			
		    <div class="jdkb">
		    	<i><span>|</span>更多</i>
		    	<img src="img/jdkb.png" />
		    	<ul>
		    		<li ><span>热</span>包教包会:手机卡'公交卡'如何使用</li>
		    		<li><span>热</span>超过10元钱的牙膏都是奢侈品？不服</li>
		    		<li><span>热</span>想在家轻轻松松有腹肌，这些工具不能少</li>
		    		<li><span>热</span>五分钟了解诺基亚 miniS</li>
		    		<li><span>热</span>三天学会ps！这些技巧不能少</li>
		    	</ul>
		    	
		    </div>	
			<div class="goods">
				<div class="head">
					<i><img src="img/jdms.png"></i><strong>10点场<em>122</em></strong>
					<span>京选尖货秒<img src="img/arrow_rt.png"></span>
				</div>
				<div class="goodlist">
				  <div class="swiper-wrapper">
					<div class="swiper-slide blue-slide">
						<img src="img/a1.jpg"/>
						<p><span>￥</span><strong>2499</strong></p>
						<s>￥4260</s>
					</div>
					<div class="swiper-slide red-slide">
						<img src="img/a2.jpg"/>
						<p><span>￥</span><strong>99</strong></p>
						<s>￥126</s>
					</div>
					<div class="swiper-slide orange-slide">
						<img src="img/a3.jpg"/>
					   <p><span>￥</span><strong>409</strong></p>
						<s>￥468</s>
					</div>
					<div class="swiper-slide green-slide">
						<img src="img/a4.jpg"/>
						<p><span>￥</span><strong>299</strong></p>
						<s>￥369</s>
					</div>
					<div class="swiper-slide pink-slide">
						<img src="img/a5.jpg"/>
						<p><span>￥</span><strong>499</strong></p>
						<s>￥689</s>
					</div>
					<div class="swiper-slide red-slide">
						<img src="img/a6.jpg"/>
						<p><span>￥</span><strong>2499</strong></p>
						<s>￥4260</s>
					</div>
					<div class="swiper-slide blue-slide">
						<img src="img/a7.jpg"/>
						<p><span>￥</span><strong>2499</strong></p>
						<s>￥4260</s>
					</div>
				</div>	
	         </div>
			</div>
			<div class="con1">
				<div class="con1-item ">
					<h1>闪购</h1>
					<p>一元任性抢</p>
					<img src="img/xl.jpg"/>
				</div>
				<div class="con1-item ">
					<h1>发现好货</h1>
					<p>发现品质生活</p>
					<img src="img/amq.jpg"/>
				</div>
				<div class="clear"></div>
				<div class="con1-item2">
					<h1>排行榜</h1>
					<p>网络全民挚爱</p>
					<img src="img/qmsj.jpg"/>
				</div>
				<div class="con1-item3">
					<h1>会买专辑</h1>
					<p>教你买买买</p>
					<img src="img/pgsj.jpg"/>
				</div>
				<div class="con1-item3">
					<h1>新品首发</h1>
					<p>诺基亚7抢购</p>
					<img src="img/njy.jpg"/>
				</div>
			</div>
			<div class="clear"></div>
			<div class="ash">
				<img src="img/ash.png" class="pic1"/>
				<img src="img/ash.jpg" class="pic2"/>
			</div>
			<div class="aishenghuo">
				
				<ul>
					<li>
						<h1>玩3C</h1>
						<p>iPhone8超低价</p>
						<span>疯狂秒杀中</span>
						<img src="img/sj2.jpg" alt="" />
					</li>
					<li>
						<h1>京东家电</h1>
						<p>爆品裸价出击</p>
						<img src="img/jiadian.jpg" alt="" />
					</li>
					<li>
						<h1>京东超市</h1>
						<p>美赞臣199减100</p>
						<img src="img/mzc.jpg" alt="" />
					</li>
					<li>
						<h1>爱家</h1>
						<p>厨具满200-40</p>
						<span class="pp">双十一先加购</span>
						<img src="img/g.jpg" alt="" />
					</li>
				</ul>
				<ul class="two">
					<li>
						<h1>爱宝宝</h1>
						<p>爆款低至5折</p>
						<img src="img/bb.jpg" alt="" />
						
					</li>
					<li>
						<h1>爱美妆</h1>
						<p>美妆0元试用</p>
						<img src="img/mz.jpg" alt="" />
						<span>美妆趴</span>
					</li>
					<li>
						<h1>爱吃</h1>
						<p>低至9.9元包邮</p>
						<img src="img/ls.jpg" alt="" />
						<span>屯零食</span>
					</li>
						
					<li>
						<h1>爱穿搭</h1>
						<p>深秋加件新衣</p>
						<img src="img/gj.jpg" alt="" />
					    <span>低至69</span>
					</li>
				</ul>
					
			</div>
			<div class="clear"></div>
			<div class="md">
				<img src="img/md.jpg"/>
			</div>
			<div class="xpz">
				<img src="img/ash.png" class="pic1"/>
				<img src="img/xpz.jpg" class="pic2"/>
			</div>
			<div class="aishenghuo">
				
				<ul class="item1">
					<li>
						<h1>全球尖货</h1>
						<p>母婴会场</p>
						<span >妈妈放心</span>
						<img src="img/sj2.jpg" alt="" />
					</li>
					<li>
						<h1>京东精选</h1>
						<p>精选优质生活</p>
						<span>品质推荐</span>
						<img src="img/jiadian.jpg" alt="" />
					</li>
					<li>
						<h1>京东体育</h1>
						<p>秋冬上新</p>
						<span>运动潮牌</span>
						<img src="img/mzc.jpg" alt="" />
					</li>
					<li>
						<h1>奢品大牌</h1>
						<p>腕表潮流</p>
						<span class="pp">6期免息</span>
						<img src="img/wb.jpg" alt="" />
					</li>
				</ul>
				<ul class="two">
					<li>
						<h1>环球时尚</h1>
						<p>低至399</p>
						<img src="img/bb.jpg" alt="" />
						
					</li>
					<li>
						<h1>珠宝首饰</h1>
						<p>万圣节大作战</p>
						<img src="img/zbss.jpg" alt="" />
						
					</li>
					<li>
						<h1>设计师</h1>
						<p>潮流设计精选</p>
						<img src="img/yf.jpg" alt="" />
						
					</li>
						
					<li>
						<h1>买手甄选</h1>
						<p>低至99</p>
						<img src="img/gj.jpg" alt="" />
					    
					</li>
				</ul>
					
			</div>
			<div class="ly">
				<img src="img/ly.jpg"/>
			</div>
			<div class="fxhd">
				<img src="img/ash.png" class="pic1"/>
				<img src="img/fxhd.jpg" class="pic2"/>
				<span>更多精彩<img src="img/arrow_rt.png"></span>
			</div>
			<ul class="jingpin">
				<li>
					<h1>休闲食品</h1>
					<p>吃货集散中心</p>
					<img src="img/szss1.jpg" />
					<img src="img/szss2.jpg" alt="" />
					<span >三只松鼠京东自营旗舰店</span>
				</li>
				<li>
					<h1>女装</h1>
					<p>女神教室</p>
					<img src="img/ns1.jpg" alt="" />
					<img src="img/ns2.jpg" alt="" />
					<span >茵曼官方旗舰店</span>
				</li>
			</ul>
			<div class="fxhd">
				<img src="img/ash.png" class="pic1"/>
				<img src="img/yxqd.jpg" class="pic2"/>
				<span>更多精彩<img src="img/arrow_rt.png"></span>
			</div>
			<ul class="jingpin">
				<li>
					<h1>女神一直美下去，尖货美妆赶紧买</h1>
					
					<img src="img/oly.jpg" />
					<img src="img/mm.jpg" alt="" />
					
				</li>
				<li>
					<h1>想做冻龄少女，塑美颜还得靠科技</h1>
					
					<img src="img/mry.jpg" alt="" />
					<img src="img/gkj.jpg" alt="" />
					
				</li>
			</ul>
			<div class="fxhd">
				<img src="img/ash.png" class="pic1"/>
				<img src="img/zb.jpg" class="pic3"/>
				<span>更多精彩<img src="img/arrow_rt.png"></span>
			</div>
			<div class="zb clear">
				<ul>
					<li>
						<strong>美食</strong><img src="img/zbtb.png" class="one"/>
						<p>俩男子和吃豆腐的故事</p>
						<img src="img/mpdf.jpg" alt="" class="two" />
						<span class="three">月球上</span>
						<img src="img/zbtp.png" class="four"/>
					</li>
					<li>
						<strong>美食</strong><img src="img/zbtb.png" class="one"/>
						<p>买什么能提升生活幸福感放得开来得及发个链接大范甘迪</p>
						<img src="img/szmv.jpg" alt="" class="two" />
						<span class="three">深圳</span>
						<img src="img/zbtp.png" class="four"/>
					</li>
				</ul>
				
			</div>
			<div class="tj">
				<span></span>
				<i><img src="img/tj.png"/>为您推荐</i>
			</div>
			<ul class="tjcp clear">
				<li>
					<img src="img/npb.jpg" alt="" />
					<p>新款单肩包女包斜挎包百搭休闲女士小包韩版时尚迷你单肩斜挎包女 红色 </p>
					<span class="price"><i>￥</i>89.<i>00</i></span>
					<span class="pj">好评率99%</span>
					<p class="kanxiangsi">看相似</p>
				</li>
				<li>
					<img src="img/lbs.jpg" alt="" />
					<p>博仑帅(BOLUBSHUAI) 博仑帅18.5-27英寸一体机电脑办公家用游戏台式主机整机 高速办公 18.5英寸酷睿i3 4G/64G固态</p>
					<span class="price"><i>￥</i>1468.<i>00</i></span>
					<span class="pj">好评率100%</span>
					<p class="kanxiangsi">看相似</p>
				</li>
				<li>
					<img src="img/zt.jpg" alt="" />
					<p>【5盒一周期，买5送5】 倩滋足贴 祛湿排浊 舒缓助眠 护理养颜足贴 10片/5袋/盒</p>
					<span class="price"><i>￥</i>19.<i>90</i></span>
					<span class="pj">好评率95%</span>
					<p class="kanxiangsi">看相似</p>
				</li>
				<li>
					<img src="img/nshf.jpg" alt="" />
					<p>【买送两片面膜】 汉萱本草 男士护肤品套装 保湿补水 控油祛痘洗面奶 洁面乳+保湿水+护肤霜 </p>
					<span class="price"><i>￥</i>59.<i>00</i></span>
					<span class="pj">好评率99%</span>
					<p class="kanxiangsi">看相似</p>
					
				</li>
				<li>
					<img src="img/kh.jpg" alt="" />
					<p>【京东秒杀！ 众星云集！强强助阵！】 绿缘萝口红 胡萝卜素变色口红不掉色不沾杯孕妇可用保湿滋润 裸 </p>
					<span class="price"><i>￥</i>59.<i>00</i><img src="img/mj.png"></span>
					<span class="pj">好评率99%</span>
					<p class="kanxiangsi">看相似</p>
				</li>
				<li>
					<img src="img/js.jpg" alt="" />
					<p>美国HARISON动感单车 家用静音汉臣 室内健身车自行车减肥健身器材 B1750 </p>
					<span class="price"><i>￥</i>1180.<i>00</i></span>
					<span class="pj">好评率100%</span>
					<p class="kanxiangsi">看相似</p>
				</li>
			</ul>
			<div class="pp"> </div>
			
			<ul class="daohang">
				<li><img src="img/sy.png" alt="" /></li>
				<li><img src="img/fl.png" alt="" /></li>
				<li><img src="img/fx.png" alt="" /></li>
				<li><img src="img/gwc.png" alt="" /></li>
				<li><img src="img/me.png" alt="" /></li>
			</ul>
			
		
			
		  </div>	
	</body>
</html>
<script src="jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jingdong.js" type="text/javascript" charset="utf-8"></script>
<script src="swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay : 2000,
    
    // 如果需要分页器
	pagination: '.swiper-pagination',
	paginationClickable: true,
	autoplayDisableOnInteraction:false,
  })        
var goodlist = new Swiper('.goodlist',{
slidesPerView :3.5,

})
</script>